<template>
  <div>
    <el-form inline>
      <el-form-item label="目录">
        <el-cascader
          :options="data"
          v-model="selDir"
          @change="dirChangeHandle"
          :props="props"
          change-on-select>
        </el-cascader>
      </el-form-item>
    </el-form>
    <div>
      <PicPicker class="ele"
                 @uploaded="uploadImage" ></PicPicker>
      <div class="ele"
           :style="{ backgroundImage: 'url(' + http + element.filePath + ')' }"
           @click="selectedImg(element)"
           v-for="element in picList">
        <div style="position: relative;top:0px;color: #8a979e;font-size: 12px;
        overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;">{{element.name}}</div>
      </div>
    </div>
    <div class="clear"></div>
    <div style="position: absolute;bottom:1%;">
      <el-pagination
        small

        @size-change="currentChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="query.page"
        :page-sizes="[20, 50, 100]"
        :page-size="query.limit"
        :total="picTotal"
        layout="total, prev, next, pager">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import appConst from '../util/appConst'
import PicPicker from './PicturePicker'
export default {
  props: {
    selectedImg: {
      type: Function
    }
  },
  data () {
    return {
      http: appConst.BACKEND_DOMAIN,
      query: {
        limit: 20,
        cid: 2,
        page: 1,
        type: 2
      },
      data: [{}],
      props: {
        value: 'id',
        label: 'name',
        children: 'children'
      },
      selDir: []
    }
  },
  computed: {
    picList () {
      return this.$store.state.editor.picList
    },
    picTotal () {
      return this.$store.state.editor.picTotal
    }
  },
  mounted () {
    this.getGroups()
  },
  methods: {
    uploadImage (data) {
      data.cid = this.query.cid
      this.$store.dispatch('savePic', data)
    },
    currentChangeHandle (value) {
      this.query.page = value
      console.log('query', this.query)
      this.$store.dispatch('getPicListByThemeId', this.query)
    },
    dirChangeHandle () {
      this.query.page = 1
      this.query.cid = this.selDir[this.selDir.length - 1]
      console.log('query', this.query)
      this.$store.dispatch('getPicListByThemeId', this.query)
    },
    getGroups () {
      const self = this
      const url = '/sys/materialclass/l?id=2'
      this.$http({
        url: this.$http.adornUrl(url),
        method: 'get'
      }).then(({data}) => {
        if (data && data.code === 0) {
          self.data = [{id: 2, name: '图片', children: data.data}]
          self.selDir = [2]
        } else {
          // alert(data.msg)
          this.$message({
            type: 'error',
            message: data.msg
          })
        }
      })
    }
  },
  components: {
    PicPicker
  }
}
</script>

<style lang="less" scoped>
.ele {
  float: left;
  width: 80px;
  height: 80px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin: 5px 5px;
  &:hover {
    border: 2px solid #18ccc0;
    cursor: pointer;
  }
}
</style>
